
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #box1{
            width: 200px;
            height: 200px;
            background-color: #4dCE04;
        }
        #sp{
            background-color: #3A87EF;

        }
        #div1{
            width: 100px;
            height: 100px;
            background-color: red;
            position: absolute;
        }
        body{
            background-color: #bfa;
            width: 10000px;
            height: 3000px;
        }
    </style>
    <script>
        window.onload=function () {
//事件冒泡（bubule）是指事件的向上传导，当后代元素的事件被触发时，其祖先元素的相同事件也会被触发，冒泡大部分是有用的，
            //如果不希望事件冒泡可以通过事件对象来取消冒泡
            var sp=document.getElementById("sp");
            var box1=document.getElementById("box1");
            sp.onclick=function (event) {
                event=event||window.event;
                alert("我是span的响应函数");
                //取消冒泡 可以将事件对象的cancelBubble 设置为true即可取消冒泡
                event.cancelBubble=true;
            };
            box1.onclick=function () {
                alert("我是box1的响应函数");
            };
            document.body.onclick=function () {//为body绑定一个响应函数
                alert("我是body的响应函数");
            };

            var div1=document.getElementById("div1");
            document.onmousemove=function (event) {
                event=event||window.event;
                var st=document.body.scrollTop||document.documentElement.scrollTop;//body的滚动条的距离
                var sl=document.body.scrollLeft||document.documentElement.scrollLeft;//html的滚动条的距离
                var x=event.clientX;//获取鼠标的坐标
                var y=event.clientY;//获取鼠标的坐标
                //获取div的偏移量
                div1.style.left=x+st+"px";
                div1.style.top=y+sl+"px";
            }
            var div2=document.getElementById("div2");
            div2.onmousemove=function (event) {
                event=event||window.event;
                event.cancelBubble=true;
            }
        }
    </script>
</head>
<body>
<div id="box1">
    我是box1
    <span id="sp">我是span</span>
</div>
<hr>
<h3>写一个div跟随鼠标的移动</h3>
<div id="div1"></div>
<div id="div2" style="width: 500px;height: 500px;background-color:green"></div>
</body>
</html>